<template>
    <div class="content">
        <div class="content-title">
            <h1 style="color: #005aa0;">榜上有名</h1>
            <h5 style="color: #3aa0bd;">HALL OF FAME</h5>
        </div>
        <div class="content-card">
            <div class="content-card-item" v-for="index in 3" :key="index">
                <div style="height: 30vh; overflow: hidden;">
                    <img class="content-photo" src="https://news.hbut.edu.cn/__local/5/11/A1/7D12BEE7F1528E2940B0D920C93_DCF53B64_28934.jpg">
                </div>
                <div class="content-info">
                    <div style="display: flex; align-items: center; margin-bottom: 20px;">
                        <div class="vertical-line"></div>
                        <div>榜上有名</div>
                    </div>
                    <p class="content-info-text">特等奖 2项！湖工大学子在第十九届“挑战杯”2024年度“揭榜挂帅”专项赛中勇创佳绩</p>
                    <div style="font-size: 17px;">2023-12-14</div>
                </div>
            </div>
        </div>
        <div style="display: flex; justify-content: center; margin-top: 30px;">
            <button type="button" class="btn btn-outline-primary btn-lg" @click="clickToOnTheList">查看更多</button>
        </div>
    </div>
</template>

<script setup>
import router from '@/router/index';

const clickToOnTheList = () => {
    router.push({name: 'OnTheList'});
}

</script>

<style scoped>

.content {
    width: 100%;
    height: 700px;
    background-color: #e7edfa;
    padding: 30px 0;
}

.content-title {
    text-align: center;
    margin-bottom: 30px;
}

.content-card {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
}
.content-card-item {
    width: 25vw;
}
.content-card-item:hover {
    cursor: pointer;
    color: #005aa0;
}
.content-photo {
    width: 100%;
    height: 30vh;
    transition: transform 0.3s ease; /* 添加平滑过渡 */
}
.content-card-item:hover .content-photo {
    transform: scale(1.1); /* 放大图片 */
}
.content-info {
    background-color: white;
    width: 100%;
    height: 20vh;
    padding: 20px 30px;
}

.vertical-line {
    width: 4px; /* 竖线宽度 */
    background-color: #0034be; /* 竖线颜色 */
    height: 20px; /* 竖线高度 */
    margin-right: 5px;
}

.content-info-text {
    font-weight: bold; 
    font-size: 17px;
    word-wrap: break-word;        /* 允许单词在需要时换行 */
    overflow: hidden;             /* 隐藏超出容器的部分 */
    text-overflow: ellipsis;      /* 超出部分显示省略号 */
    display: -webkit-box;         /* 使用 WebKit 布局来处理溢出 */
    -webkit-line-clamp: 2;        /* 限制文本行数为 2 行，超出部分显示省略号 */
    -webkit-box-orient: vertical; /* 垂直排列 */
}

/* 响应式调整 */
@media (max-width: 992px) {
    .content-info {
        height: 180px;
    }
}

</style>